@extends("ogreencard/layout/layout")
@section('h1',"订单管理")
@section("h2","订单编辑、添加")
@section("content")
    <style>
        .goods-num{
            width:50px;
        }
    </style>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            {{csrf_field()}}
            <input type="hidden" name="order_id" value="{{$order->order_id}}">

            <div class="layui-form-item">
                <label for="" class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input value="{{$order->user_name}}"  name="user_name"  autocomplete="off"  class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">联系方式</label>
                <div class="layui-input-inline">
                    <input value="{{$order->user_mobile}}"  name="user_mobile"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">理财经理</label>
                <div class="layui-input-inline">
                    <input value="{{$order->bank_manager}}"  name="bank_manager"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">支行</label>
                <div class="layui-input-inline">
                    <input value="{{$order->bank}}"  name="bank"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">兑换日期</label>
                <div class="layui-input-inline">
                    <input value="{{$order->exchange_at}}" id="exchangeDate" name="exchange_at"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">收件人</label>
                <div class="layui-input-inline">
                    <input value="{{$order->express_user}}"  name="express_user"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">收件地址</label>
                <div class="layui-input-inline">
                    <input value="{{$order->express_address}}"  name="express_address"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="" class="layui-form-label">收件电话</label>
                <div class="layui-input-inline">
                    <input value="{{$order->express_mobile}}"  name="express_mobile"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">派送日期</label>
                <div class="layui-input-inline">
                    <input value="{{$order->express_date}}"  name="express_date" id="express_date"  autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label">销售员</label>
                <div class="layui-input-inline">
                    <select name="manager" id="" class="layui-select">
                        @foreach($managers as $m)
                            <option value="{{$m->id}}" @if($order->manager == $m->id) selected @endif >{{$m->real_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label for="" class="layui-form-label">订单类型</label>
                <div class="layui-input-inline">
                    <select name="card_type" id="" class="layui-select">
                        @foreach($orderCardTypes as $key => $c)
                            <option value="{{$key}}" @if($order->card_type == $key) selected @endif >{{$c}}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">兑换产品</label>
                <div class="layui-input-block">

                    <div class="layui-btn" onclick="select_goods()">
                        <i class="layui-icon"></i><span>选择产品</span>
                    </div>
                    <style>

                        .goods-model{
                            position: fixed;
                            top: 0;
                            left: 0;
                            width: 100vw;
                            height: 100vw;
                            background: rgba(0,0,0,.5);
                            z-index: 100;

                        }

                        .goods-model .goods-box{

                            margin: 0 10vw;
                            
                            background: #fff;
                            padding-bottom: 10px;
                            padding-top: 10px;
                            border-radius: 4px;
                            height:100vh;
                            overflow: scroll;
                        }
                        .goods-model table{
                            width:96%;
                            margin:auto;
                        }
                        .goods-model .model-hide{
                            display: none;
                        }
                        .goods-show{
                            display: none;
                        }

                        .goods-model .goods-show{
                            display: table-cell;;
                        }
                        .sure-btn{
                            display: none;
                        }
                        .goods-model .sure-btn{
                            text-align: center;
                            display: block;
                        }

                        .unselect{
                            display: none;
                        }
                        .goods-model .unselect{
                            display: table-row;
                        }

                    </style>
                    <div class="goods-model1" id="goodsModel">
                        <div class="goods-box">
                            <table class="layui-table" >
                                <thead>
                                <tr>
                                    <th>
                                        <div class="goods-show">
                                            <input type="checkbox" lay-filter="checkall"  id="checkboxall" lay-skin="primary">
                                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                                <i class="layui-icon layui-icon-ok"></i>
                                            </div>
                                        </div>
                                    </th>

                                    <th>名称</th>
                                    <th>积分</th>
                                    <th class="model-hide">数量</th>
                                    <th class="model-hide">合计</th>
                                    <th class="model-hide">备注</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($goods as $key=> $g)
                                    <tr data-id="{{$g->pack_id}}"
                                        id="th{{$g->pack_id}}"
                                        data-price="{{$g->pack_price}}"
                                        class="goods-list @if($g->og_id==0) unselect @endif">

                                        <td >
                                            <input type="checkbox"
                                                   value="{{$key}}"
                                                   lay-skin="primary"
                                                   lay-filter="goods"
                                                   name="gCheck[]"
                                                   @if($g->og_id>0) checked @endif
                                            >
                                            <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                                <i class="layui-icon layui-icon-ok"></i>
                                            </div>

                                            <input type="hidden" name="gId[]" value="{{$g->pack_id}}">
                                        </td>
                                        <td>{{$g->pack_name}}</td>
                                        <td >{{$g->pack_price}}</td>
                                        <td class="model-hide"><input class="layui-input goods-num"  name="gNum[]" value="{{$g->num>0?$g->num:1}}"></td>
                                        <td class="model-hide singleTotalPrice" >{{$g->num*$g->pack_price}}</td>
                                        <td class="model-hide"><textarea name="gNote[]"  rows="2">{{$g->note}}</textarea></td>
                                    </tr>
                                @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="model-hide">
                                        <td>应选积分：</td>
                                        <td class="x-red" id="maxTotal">{{$order->total_price}}</td>
                                        <td>已选总积分：</td>
                                        <td  class="x-red" id="total">0</td>
                                        <td class="x-red"  colspan="3" id="priceNote"></td>
                                    </tr>
                                </tfoot>
                            </table>

                            <div class="sure-btn">
                                <br>
                                <p class="layui-btn" onclick="select_goods()">确定</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="desc" name="note" lay-verify="note" class="layui-textarea">{{$order->note}}</textarea>
                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">确定</button>
            </div>
        </form>
    </div>
</div>

<script>
    var table = '';
    var goodsData=new Array();
    var maxTotal = {{$order->total_price}};

    function countPrice(){

        var total = 0;

        $('.goods-list').each(function(key,ele)
        {
            ele = $(ele);
            if(ele.hasClass('unselect')) return true;
            var id = ele.data('id');
            var price = ele.data('price');
            var num = ele.find(".goods-num").eq(0).val();
            var single = price * num;
            ele.find('.singleTotalPrice').eq(0).text(single);
            total += single;
        })

        if(maxTotal>total){
            var msg = "还差"+(maxTotal-total);
        }else{
            var msg = "多选"+(total-maxTotal);
        }

        $('#total').text(total);
        $("#priceNote").text(msg);
    }

    layui.use(['table','form', 'layer','laydate'], function ()
    {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer;
            table = layui.table;

        layui.laydate.render({
            elem:"#exchangeDate"
        })

        layui.laydate.render({
            elem:"#express_date"
        })

        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input[type=checkbox]').prop('checked',true);
                $('tbody .goods-list').removeClass("unselect");
            }else{
                $('tbody input[type=checkbox]').prop('checked',false);
                $('tbody .goods-list').addClass("unselect");
            }
            form.render('checkbox');
            countPrice();
        });

        form.on('checkbox(goods)',function(data)
        {
            var th = $(data.elem).parents("tr");

            if(data.elem.checked){
                th.removeClass("unselect");

            }else{
                th.addClass("unselect");
                $("#checkboxall").prop("checked",false);
            }
            form.render('checkbox');
            countPrice();
        })
        //监听提交
        form.on('submit(add)', function (data) {

            console.log(data.field);

            //发异步，把数据提交给php
            layui.jquery.post({
                url:"./orderEdit",
                data:data.field,
                success:function(res){
                    if(res.code != 200){
                        layer.alert(res.msg,{icon:7});
                    }else{
                        layer.alert("操作成功", {icon: 6}, function ()
                        {
                            // 获得frame索引
                            //var index = parent.layer.getFrameIndex(window.name);
                            parent.window.location.reload();
                            //关闭当前frame
                            //parent.layer.close(index);
                        });
                    }
                    return false;
                }
            })
            return false;
        });
        $(".goods-num").on('change',countPrice);
        countPrice();
    });


    function select_goods(){
        var goodsModel = $("#goodsModel");
        var has = goodsModel.hasClass("goods-model");
        if(has){
            goodsModel.removeClass("goods-model");
        }else{
            goodsModel.addClass("goods-model");
        }
    }
</script>

@endsection